import DEFAULT_AVATAR from '@/assets/imgs/default-avatar.jpg';
import EssayCommentCard from '@/components/EssayCommentCard';
import MyPageContainer from '@/components/MyPageContainer';
import { getPostVoByIdUsingGet } from '@/services/backend/postController';
import { doPostFavourUsingPost } from '@/services/backend/postFavourController';
import { doThumbUsingPost1 } from '@/services/backend/postThumbController';
import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
import { Avatar, Card, Flex, Image, List, message, Space, Typography } from 'antd';
import dayjs from 'dayjs';
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

const EssayDetail: React.FC = () => {
  const params = useParams();
  const id = (params['id'] ?? -1) as number;

  //评论数据
  const [postData, setPostData] = useState<API.PostVO>({});

  /**
   * 加载评论数据
   * @param sortField 排序字段
   * @param pageNum 当前页面
   */
  const loadPostData = async () => {
    try {
      const { code, data } = await getPostVoByIdUsingGet({
        id: id,
      });
      if (code === 0 && data) {
        setPostData(data ?? {});
      }
    } catch (e: any) {
      message.error(e.message);
    }
  };

  /**
   * 处理帖子点赞
   * @param postId
   */
  const handleThumb = async (postId: number) => {
    try {
      await doThumbUsingPost1({
        postId,
      });
      await loadPostData();
    } catch (e: any) {
      message.error(e.message);
    }
  };

  /**
   * 处理帖子收藏
   * @param postId
   */
  const handleFavour = async (postId: number) => {
    try {
      await doPostFavourUsingPost({
        postId,
      });
      await loadPostData();
    } catch (e: any) {
      message.error(e.message);
    }
  };

  /**
   * 初始化组件时加载的数据
   */
  useEffect(() => {
    loadPostData();
  }, []);

  /**
   * 获取评论的actions
   */
  const postActions: React.ReactNode[] = [];
  //点赞展示
  if (postData.hasThumb) {
    postActions.push(
      <Typography.Link key={'thumb'} onClick={() => handleThumb(postData?.id ?? -1)}>
        <Space size={4}>
          <LikeOutlined />
          {postData.thumbNum}
        </Space>
      </Typography.Link>,
    );
  } else {
    postActions.push(
      <a key={'thumb'} onClick={() => handleThumb(postData?.id ?? -1)}>
        <Space size={4}>
          <LikeOutlined />
          {postData.thumbNum}
        </Space>
      </a>,
    );
  }
  //收藏展示
  if (postData.hasFavour) {
    postActions.push(
      <Typography.Link key={'favour'} onClick={() => handleFavour(postData?.id ?? -1)}>
        <Space size={4}>
          <StarOutlined />
          {postData.favourNum}
        </Space>
      </Typography.Link>,
    );
  } else {
    postActions.push(
      <a key={'favour'} onClick={() => handleFavour(postData?.id ?? -1)}>
        <Space size={4}>
          <StarOutlined />
          {postData.favourNum}
        </Space>
      </a>,
    );
  }
  //回复展示
  postActions.push(
    <a key={'reply'}>
      <Space size={4}>
        <MessageOutlined />
        {postData.commentNum}
      </Space>
    </a>,
  );

  const content: React.ReactNode = (
    <>
      <Flex vertical={true} gap={16}>
        <Card variant={'borderless'}>
          <List itemLayout={'vertical'}>
            <List.Item actions={postActions}>
              <List.Item.Meta
                avatar={<Avatar size={'large'} src={postData.user?.avatar ?? DEFAULT_AVATAR} />}
                title={postData.user?.username ?? '无名氏'}
                description={<span key={'time'}>{dayjs(postData.createTime).fromNow()}</span>}
              />
              <div>
                <div className={'text-base break-all whitespace-pre-line'}>{postData.content}</div>
                <Space size={'middle'}>
                  {postData.pictureList?.map((picture) => (
                    <Image key={picture} className={'z-0'} width={80} src={picture} />
                  ))}
                </Space>
              </div>
            </List.Item>
          </List>
        </Card>
        <div>
          <EssayCommentCard id={id} type={'post'} />
        </div>
      </Flex>
    </>
  );

  return <MyPageContainer content={content} />;
};
export default EssayDetail;
